<template>
    <div class="header">
        <div>后台管理系统</div>
        <div class="userInfo">
            <div class="userName">
                <img style="width: 25px" src="../../assets/zhanghu.png" alt="">
                <a-dropdown>
                    <div>{{params.user?.name || '管理员'}}</div>
                    <template #overlay>
                        <a-menu>
                            <a-menu-item>
                                <div @click="logout">
                                    退出登录
                                </div>
<!--                                <a href="javascript:;"></a>-->
                            </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>

            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const params = reactive({
    userInfo:{},
    user:{}
})
onMounted(()=>{
    params.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    params.user = JSON.parse(localStorage.getItem('user'))
})
const logout = () => {
    localStorage.clear()
    router.push('/login')
}
</script>
<style lang="less" scoped>
.header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    .userInfo{
        display: flex;
        align-items: center;
        .link{
            margin-right: 24px;
        }
        .userName{
            display: flex;
            align-items: center;
            border-left: 1px solid #cdcdcd;
            padding-left: 24px;
            img{
                margin-right: 8px;
            }
        }
    }
}
</style>
